.layui {
	&-input,
	&-select,
	&-textarea {
		--tw-border-opacity: 1;
		border-color: hsla(var(--bc) / 0.2);
		// border-color: hsl(var(--b3,var(--b2))/var(--tw-border-opacity));
		--tw-bg-opacity: 1;
		background-color: hsl(var(--b1) / var(--tw-bg-opacity));
		color: inherit;
		&::-webkit-input-placeholder {
			color: hsla(var(--bc) / 0.3);
		}
		&:hover,
		&:focus {
			border-color: hsla(var(--bc) / 0.6) !important;
		}
		// background: #f00;
		&.layui-input-sm{
			height: 24px;
		}
	}
	&-form {
        // 长label修复
        &-label {
            text-overflow: ellipsis;
            white-space: nowrap;
        }
		&-checkbox {
			background-color: hsl(var(--b3));
			span {
				background-color: hsla(var(--bc) / 0.6);
			}
			i {
				background-color: hsla(var(--bc) / 0.06);
				border-color: hsla(var(--bc) / 0.6) !important;
			}
			&:hover {
				span {
					background-color: hsla(var(--bc) / 0.6);
				}
				i {
					background-color: hsla(var(--bc) / 0.06);
					border-color: hsla(var(--bc) / 0.6) !important;
				}
			}
			&[lay-skin="primary"] {
				i {
					background: none;
					border: 1px solid;
					--tw-border-opacity: 1;
					// border-color: hsl(var(--b3) / var(--tw-border-opacity));
					border-color: hsla(var(--bc) / 0.3);
					&::before {
						content: "";
					}
					&:hover {
						--tw-border-opacity: 1;
						border-color: hsla(var(--bc) / 0.3);
						// border-color: hsl(var(--b3) / var(--tw-border-opacity));
					}
				}
				span {
					color: hsl(var(--bc));
					&:hover {
						// background-color: none !important;
					}
				}
				&:hover {
					background-color: none !important;
					i {
						border-color: hsl(var(--p) / var(--tw-border-opacity));
						// color: #fff;
					}
					span {
						background-color: hsla(var(--bc) / 0) !important;
					}
				}
			}
		}
		&-checked {
			&[lay-skin="primary"] {
				i {
					--tw-border-opacity: 1;
					background-color: hsl(var(--p) / var(--tw-border-opacity));
					border-color: hsl(var(--p) / var(--tw-border-opacity)) !important;
					&::before {
						content: "\e605";
					}
				}
			}
			i {
				color: hsl(var(--p));
				border-color: hsl(var(--p)) !important;
			}
			span {
				--tw-bg-opacity: 1;
				background-color: hsl(var(--p) / var(--tw-bg-opacity));
			}
			&:hover {
				i {
					color: hsl(var(--p));
					border-color: hsl(var(--p)) !important;
				}
				span {
					--tw-bg-opacity: 1;
					background-color: hsl(var(--p) / var(--tw-bg-opacity));
					// background-color: none;
				}
			}
		}
		&-select {
			dl {
				--tw-border-opacity: 1;
				border-color: hsla(var(--bc) / 0.2);
				// border-color: hsl(var(--b3,var(--b2))/var(--tw-border-opacity));
				--tw-bg-opacity: 1;
				background-color: hsl(var(--b1, var(--b1)) / var(--tw-bg-opacity));
				color: inherit;
				dd {
					&:hover {
						--tw-bg-opacity: 0.1;
						background-color: hsl(var(--bc) / var(--tw-bg-opacity));
					}
					&.layui-this {
						background-color: hsl(var(--p) / var(--tw-border-opacity));
					}
					&.layui-disabled {
						color: hsla(var(--bc) / 0.3) !important;
						background-color: hsl(var(--b3) / var(--tw-bg-opacity));
						// &:hover{
						//     color: hsla(var(--b2) / 0.3);
						// }
					}
				}
			}
		}
		&-onswitch {
			--tw-bg-opacity: 1;
				background-color: hsl(var(--p) / var(--tw-bg-opacity));
                border-color: hsl(var(--p));
		}
        &-radio{
            &> i{
                &:hover{
                    color: hsl(var(--p));
                }
            }
        }
        &-radioed {
            &> i {
                color: hsl(var(--p));
                
            }
        }
	}

	// .layui-input, .layui-select, .layui-textarea
	&-checkbox {
		background-color: #f00;
		&-disbaled,&-disabled {
			span {
				color: #ccc;
				// background-color: hsla(var(--bc) / 0.3) !important;
			}
			i {
				border-color: hsla(var(--bc) / 0.2) !important;
			}
		}
		&-disbaled[lay-skin="primary"],&-disabled[lay-skin="primary"] {
			border-color: #f00 !important;
			span {
				color: hsla(var(--bc) / 0.4);
			}
			i {
				border-color: hsla(var(--bc) / 0.1) !important;
			}
		}
	}
}
.layui-form{
	.required {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		&::before {
			font-family: "verdana";
			content: '*';
			// font-family: "layui-icon";
			// content: '\e67a';
			font-size: 1rem;
			// line-height: 2rem;
			height: 16px;
			color: #f00;
			padding: 0 2px;
			display: flex;
			align-items: center;
			// border:1px solid blue;
		}
	}
}
.form-label-lg {
	@labelWidth: 160px;
	.layui-form-label {
		width: @labelWidth;

		&:hover {
			// white-space: pre-wrap;
			// display: block;
			// width: @labelWidth;
			// // min-width: 80px;
			// position: absolute;
			// height: 15px;
			// border: 1px solid #f00;

			// &+.layui-input-inline {
			//     margin-left: 125px;
			// }
		}
	}

	.layui-input-block {
		margin-left: @labelWidth+30px;
	}
}
.layui-disabled,.layui-disabled:hover{
    --tw-text-opacity: 1;
    color:hsla(var(--bc)/.6) !important;
}